<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<!-- <customNavBar1 :title="title"></customNavBar1> -->
		<c-nav-bar :title="title"></c-nav-bar>

		<!-- <u-swiper height='450' :list="list1" indicator indicatorMode="line" circular></u-swiper> -->


		<view class="user" v-if="searchList">
			<view class="user-img">
				<image :src="searchList.headUrl" mode="aspectFill">
				</image>
			</view>
			<view class="user-right">
				<view class="user-name">
					{{searchList.realName}}
				</view>
				<view class="user-time">
					{{searchList.createDate}}发布
				</view>
			</view>
		</view>


		<view class="text-text" v-if="searchList">
			<view class="text-one">
				<!-- 嵊泗本岛自由行｜2天1夜充实版攻略｜食住 -->
				{{searchList.title}}
			</view>
			<view class="" style="font-size: 26rpx ; color: #1C1E41; font-weight: Regular; margin-top: 20rpx;">
				活动时间：{{searchList.startTime}}
			</view>
			<view class="" style="font-size: 26rpx ; color: #1C1E41; font-weight:Regular ; margin: 20rpx 0 44rpx;">
				联系电话：{{searchList.phoneCopy}}
			</view>
			<view class="" style="font-size: 36rpx ; color: #1C1E41; font-weight: bold; margin-bottom: 20rpx;">
				简介
			</view>
			<view class="text-two">
				<u-parse :content='searchList.content' :tagStyle="style"></u-parse>
			</view>


		</view>
		<view class="bottom-input">
			<view @click="phone(searchList.phone)">
				电话联系
			</view>
		</view>

		<!-- 授权手机登录 -->
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>


</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import inputBox from '@/compoments/inputBox/inputBox.vue'
	export default {
		components: {
			GetPhoneNumber,
			inputBox,
		},
		data() {
			return {
				title: '志愿活动',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				searchList: '',
				substrings: [],
				list1: [
					"https://i.ringzle.com/file/20240625/6e6f94378a574f3b8c2bb397eae41f4c.png",

				],
				type: null,
				style: {
					// 字符串的形式
					p: 'color:#666666;font-size:30rpx; line-height: 48rpx; font-weight: Regular;',
					// span: 'font-size: 30rpx'
				}
			};
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			this.getList(option.id)
			// this.$login().then(res => {
			// 	if (res !== 0) {
			// 		this.$refs['phoneNumber'].show = true;
			// 	}
			// })
		},
		methods: {
			// 电话联系
			phone(phone) {
				console.log('电话联系');
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			loginSuccess() {
				this.getList(this.id)
			},

			// 获取详情数据
			getList(id) {
				// /api/commvolunteer/getOne
				this.$api.get(`/api/commvolunteer/getOne?id=${id}`)
					.then(res => {
						console.log(res);
						this.searchList = res.data.data;
						this.searchList.phoneCopy = this.$aesTm.tuomin(this.searchList.phone, 2);
						// 根据逗号(,)分割字符串
						this.substrings = this.searchList.content.split('\n');
					})
			},

		}
	}
</script>
<style lang="less">
	.u-moreList {
		width: 60% !important;
	}

	.input-box {
		border-top: 0 !important;
		border-bottom: 0 !important;
	}

	.swiper {
		box-sizing: border-box;
		width: 100vw;
		height: 450rpx !important;
		backdrop-filter: blur(300px);
		background: rgba(251, 251, 251, .1);

	}

	.bottom-input {
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		height: 136rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		text-align: center;

		:nth-child(1) {
			height: 88rpx;
			line-height: 88rpx;
			width: 690rpx;
			background-color: #007A69;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: Regular;
			color: #FFFFFF;
			text-align: center;
			margin: 20rpx auto;
		}
	}

	.u-badge {
		padding: 0 !important;
		background-color: #FFFFFF !important;
		margin-left: -14rpx;
		color: #666666 !important;
		margin-top: 5rpx;
	}

	.u-input__content__field-wrapper__field {
		font-size: 24rpx;
		margin-left: 30rpx;
	}

	.indicator {
		// @include flex(row);
		display: flex;
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.u-modal__content__text {
		text-align: center !important;
	}

	.text-three {
		width: 100%;
		padding-bottom: 100rpx;

		.img {
			width: 100%;
		}
	}
</style>

<style lang="scss">
	.page {
		margin: 0;
		box-sizing: border-box;
		padding: 0;
		padding-bottom: 136rpx;
		// background-color: aqua;
		// height: 100vh;
	}

	.user {
		display: flex;
		padding: 31rpx 24rpx;

		.user-img {
			margin-right: 31rpx;
			width: 36px;
			height: 36px;

			image {
				height: 36px;
				width: 36px;
			}
		}

		.user-right {
			.user-name {
				font-size: 30rpx;
				color: #111111;
			}

			.user-time {
				font-size: 24rpx;
				color: #999999;
			}
		}


	}

	.text-text {
		padding: 26rpx;
		border-bottom: 1rpx solid #f0f2f5;
		// margin-bottom: 200rpx;

		.text-one {
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 12px;
		}

		.text-two {
			font-size: 30rpx;
			color: #666666;
			line-height: 48rpx;
			font-weight: Regular;

		}


	}
</style>